<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <title>获取分层</title>
    <link rel="icon" type="image/png" href="image/favicon.png" />
    <link rel="stylesheet" href="index.css" />
    <script defer type="text/javascript" src="index.js"></script>
  </head>
  <body>
    <div id="toolbar">
      <input id="inputFile" type="file" accept="image/png" multiple />
      <button id="back" hidden><i>&#xe630;</i>返回</button>
      <button id="zoomin" disabled><i>&#xe66c;</i>放大</button>
      <button id="zoomout" disabled><i>&#xe66d;</i>缩小</button>
      <button id="clear" disabled><i>&#xe622;</i>清除标注</button>
      <button id="cut" disabled><i>&#xe84d;</i>框选</button>
      <button id="pick" disabled><i>&#xe6ff;</i>自动选出</button>
      <button id="test" disabled><i>&#xe61a;</i>验证</button>
      <button id="copy" disabled><i>&#xe620;</i>复制</button>
      <button id="save" disabled><i>&#xe621;</i>导出</button>
    </div>
    
    <div id="workArea">
      <div id="canvasWrap">
        <canvas id="myCanvas"></canvas>
        <canvas id="operateCanvas"></canvas>
        <div id="flagLayer"></div>
      </div>
      <div id="testWrap">
        <canvas id="testCanvas"></canvas>
      </div>
      <div id="listWrap">
        <div>
          <label lang="obj" class="current">对象列表</label>
          <label lang="file">文件列表</label>
        </div>
        <div id="objList" tabindex="0"></div>
        <div id="fileList" tabindex="0" hidden></div>
      </div>
    </div>
    
    <div id="resultArea">
      <div id="outputWrap">
        <canvas id="outputCanvas" width="256" height="256" tabindex="0"></canvas>
      </div>
      <div id="selectBox" tabindex="0" hidden></div>
      <div id="feedback">
        <textarea id="sourceCode" disabled></textarea>
      </div>
    </div>
  </body>
</html>
